<template>
  <div id="allStockDataCharts" class="clearFix bgc-fff">
    <div class="clearFix">
      <canvas style="width:100%;height:300px;" />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import echarts from 'echarts'
  import * as OperationApi from '@/api/operation'
  export default {
    name: '',
    props: ['allStockData'],
    data() {
      return {
      }
    },
    components: {
    },
    created() {
    },
    mounted() {
      this.initData()
    },
    updated() {
      // this.initCharts()
    },
    watch: {
      allStockData: {
        deep: true,
        handler(val) {
          console.log('allStockData-handler()', val)
          this.initCharts(val)
        }
      }
    },
    methods: {
      initData() {
        OperationApi.getLspOperationInfo().then(res => {
          console.log('getLspOperationInfo()-res', res)
          this.lspFromChartData = res.data.lsp_ranking
          this.initCharts(this.lspFromChartData)
        }).catch(() => {})
      },
      initCharts(data) {
        // const that = this
        console.log('allStockData', data)
        const myChart = echarts.init(document.getElementById('allStockDataCharts'))
        const option = {
          title: {
            text: '全网库存'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            data: data.map(function(item) {
              return item[0]
            })
          },
          yAxis: {
            splitLine: {
              show: false
            }
          },
          toolbox: {
            left: 'center',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          dataZoom: [{
            startValue: '2015-01'
          }, {
            type: 'inside'
          }],
          visualMap: {
            top: 10,
            right: 10,
            pieces: [{
              gt: 0,
              lte: 50,
              color: '#096'
            }, {
              gt: 50,
              lte: 100,
              color: '#ffde33'
            }, {
              gt: 100,
              lte: 150,
              color: '#ff9933'
            }, {
              gt: 150,
              lte: 200,
              color: '#cc0033'
            }, {
              gt: 200,
              lte: 300,
              color: '#660099'
            }, {
              gt: 300,
              color: '#7e0023'
            }],
            outOfRange: {
              color: '#999'
            }
          },
          series: {
            name: '库存数量',
            type: 'line',
            data: data.map(function(item) {
              return item[1]
            }),
            markLine: {
              silent: true,
              data: [{
                yAxis: 50
              }, {
                yAxis: 100
              }, {
                yAxis: 150
              }, {
                yAxis: 200
              }, {
                yAxis: 300
              }]
            }
          }
        }
        // 清空画布防止缓存
        myChart.clear()
        // 设置数据层 需先setOption() 后才能getComponent()
        myChart.setOption(option, true)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #allStockDataCharts{
    margin: 0 0 0 0;
    width:100%;
    height: 400px;
  }
</style>

